<template>
  <div style="display: flex;">
    <div @click="switchCom(item,index)" :class="[active == index ? 'active' : '']" class="tabs" v-for="(item,index) in data">
      <div>{{ item.name }}</div>
    </div>
  </div>
  <component :is="comId"></component>
</template>

<script setup lang=ts>
import { markRaw, reactive,ref,shallowRef } from 'vue';
import AVue from './A.vue';
import BVue from './B.vue';
import CVue from './C.vue';

const comId = shallowRef(AVue)
const active = ref<number>(0)
const switchCom = (item:any,index:number)=>{
  comId.value = item.com
  active.value = index
}
const data = reactive([
  {
    name: "A组件",
    com: markRaw(AVue)
  },
  {
    name: "B组件",
    com: markRaw(BVue)
  },
  {
    name: "C组件",
    com: markRaw(CVue)
  }
])
</script>

<style scoped lang="less">
.active{
  background: aqua;
}
.tabs{
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
</style>